<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件学习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
</head>

<body>
    <div id="app">
        <!-- 将组件进行任意次数的复用： -->
        <!-- 当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。 -->
        <button-1></button-1>

        <button-1></button-1>

        <button-1></button-1>
        <div>
            <button-2></button-2>

            <button-2></button-2>

            <button-2></button-2>


        </div>

    </div>

    <script>
        // 定义一个名为 button-counter 的新组件
        Vue.component('button-1', {
            //data 必须是一个函数
            data: function () {
                return {  //一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝，不然你点击1个会导致影响到其它所有实例
                    count: 0
                }
            },
            template: '<button v-on:click="count++">你点击了{{ count }} 次.</button>',

        })
        // 定义一个名为 button-counter 的新组件
        Vue.component('button-2', {
            //data 必须是一个函数
            data: function () {
                return {  //一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝，不然你点击1个会导致影响到其它所有实例
                    count2: 0
                }
                return {
                    a: 0
                }
            },
            template: '<button v-on:click="count2++">你点击了{{ count2 }} 次.</button>',

        })


        new Vue({ el: '#app' })



    </script>

</body>

</html>